body,
html {
    height: 100%;
    font-size: .1rem;
    background-color: midnightblue;
    color: white;
}

#root,
#root>div {
    height: 100%;
}

li {
    list-style: none;
}

.left-bottom {
    color: #fff;
    width: 20vw;
    height: 2.8rem;
    position: fixed;
    left: -350px;
    bottom: 3%;
    transition: .4s;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    z-index: 999;
    min-width: 360px;
    min-height: 380px;

    div:nth-child(1) {
        width: 90%;

        // height: 100%;
        // background-color: midnightblue;
        .shezhi {
            font-size: .1rem;
            // background-color: red;
            background-image: linear-gradient(to right, #4bafe4, rgba(255, 0, 0, 0));
            height: 4vh;
            line-height: 5vh;
            border-bottom: 0;
            margin-bottom: .2rem;
        }

        span {
            font-size: .05rem;
        }

        input[type=number] {
            color: white;
            width: 60px;
            background-color: midnightblue;
            border: .5px solid rgb(140, 140, 184);
        }

        div {
            font-size: .07rem;
            margin: 0 0 0.04rem 0;
            border-bottom: 0.5px solid rgb(94, 139, 189);
            padding-left: 10px;
            text-align: left;
        }

        div:nth-child(1) {
            margin: 10px 0 0 .05rem;
            // font-size: .09rem;
            // background-color: red;
            // background-image: linear-gradient(to right, #4bafe4, rgba(255, 0, 0, 0));
            height: 4vh;
            // line-height: 3.5vh;
            border-bottom: 0;
        }

        .setImg {
            li:first-child {
                margin: .05rem 0 .05rem 0;
                font-size: .08rem;
            }

            li:last-child {
                margin-bottom: .05rem;

                input {
                    // padding: 0 0 .2rem .2rem;
                    font-size: .08rem;
                    margin-right: calc(100% - 98%);
                    width: calc(100% - 78%);
                    // height: 3.5vh;
                }

                // input:last-child {
                //     margin-right: 0;
                // }

                span {
                    margin-right: .03rem;
                    font-size: .07rem;
                }
            }
        }

        .suo,
        .colorFun {
            li:first-child {
                font-size: .08rem;
                margin: .02rem 0;
            }

            li:last-child {
                margin: 0 0 .05rem .1rem;

                input {
                    vertical-align: middle;
                    margin-right: .06rem;
                }

                label {
                    margin-right: .15rem;
                    font-size: .08rem;
                }
            }
        }

        .other {
            li {
                font-size: .08rem;
                // margin: .5vh 2vh;
                margin-bottom: .05rem;

                input {
                    margin-right: 0.2rem;
                }

                input[type='number'] {
                    // width: 7rem;
                    // margin: .2rem 0;
                    font-size: .08rem;
                }
            }

            // li:first-child {
            //     font-size: 2vh;
            //     margin: .5rem 0 .0rem 0;
            // }
        }

    }

    button {
        display: block;
        margin: .1rem auto;
        width: .66rem;
        height: .2rem;
        border-radius: 20px;
        background-color: rgb(0, 191, 255);
        border: 0;
        color: white;
    }

}


.left-bottom:hover{
    left: 0;
    box-shadow: rgb(74, 177, 229) 0px 0px 10px 10px;
    background-color: midnightblue;
}

// .left-bottom {
//     left: 0;
//     box-shadow: rgb(74, 177, 229) 0px 0px 10px 10px;
//     background-color: midnightblue;
// }


// 
@keyframes linkTo {

    from,
    80%,
    90%,
    to {
        left: -.05rem;
    }

    85%,
    95% {
        left: .02rem;
    }
}
